<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .el-table .warning-row {
            background: #b3e19d;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

    </style>

</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../js/Axios/axios-0.18.0.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<div id="app">



    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 30px">
        <el-form-item label="请输入地址：">
            <el-input v-model="formInline.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="请商品名称：">
            <el-input v-model="formInline.waresName" placeholder="请商品名称"></el-input>
        </el-form-item>

        <el-form-item label="选择范围：">
            <el-select v-model="formInline.Range" placeholder="选择范围">
                <el-option label="1 公里" value="1"></el-option>
                <el-option label="10 公里" value="10"></el-option>
                <el-option label="20 公里" value="20"></el-option>
                <el-option label="100 公里" value="100"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item> <br>
    </el-form>

    <span class="demonstration">选择日期</span>
    <el-date-picker
            v-model="formInline.day"
            size="large"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
    </el-date-picker>


    <template>
        <el-table
                :data="wares"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="image"
                    label="民宿图片"
                    width="180">
<!--                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.image"
                            :fit="fill"></el-image>-->
                <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src=scope.row.image
                        :fit="fill"></el-image>
                </template>

            </el-table-column>
            <el-table-column
                    prop="waresName"
                    label="民宿的名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="norms"
                    label="规格：人/间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="addressDistance"
                    label="距离/m"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="280">
<!--                <el-button type="primary" round>购买</el-button>
                <el-button type="success" round>查看详情</el-button>-->
                <template slot-scope="scope">
                <el-row>
<!--                    <el-button type="primary" >购买</el-button>
                    <el-button type="success"  >查看详情</el-button>-->
                    <el-button type="primary"  @click="buyWares(scope.row)">购买</el-button>
                    <el-button type="success" @click="queryWares(scope.row)" >查看详情</el-button>
                </el-row>
                </template>
            </el-table-column>
        </el-table>
    </template>






</div>


<script>
    new Vue({

        el: "#app",

        data() {
            return {

                // 这是商品的数据
                wares: [{

                    id: '158582283090817021',                    /* 商品的 id */
                    waresName: '辣子鸡',             /* 商品的名称 */
                    price: '502',                 /* 商品的价格 */
                    number: '2',                /* 当天民宿的最大数量 */
                    norms: '1',                 /* 商品的套间规格 */
                    image: '/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg',                 /* 图片 */
                    addressX: '111.154481',               /* 经纬度地址的经度信息 */
                    addressY: '21.782305',               /* 经纬度地址的纬度信息 */
                    address: '广东省茂名市电白区霞洞镇永乐小学',               /* 经纬度地址的纬度信息 */
                    addressDistance: '300',        /* 距离 */
                    description: '民宿短租，快来租我吧',           /* 描述信息 */
                    status: '1',                /* 状态0 停售 1 起售 2 申请中 3 禁用 */
                    createTime: '2021-05-06 17:20:07',            /* 创建时间 */
                    updateTime: '2021-05-06 17:20:07',            /* 更新时间 */
                    createPhone: '13112345678',           /* 创建人,创建的商家的电话 */
                    updateId: '1'               /* 修改人 */

                }],

                formInline: {
                    address: '广东省茂名市电白区霞洞镇永乐小学',
                    waresName: '辣',
                    day: '',
                    Range: '10'
                },

                url:"/common/download?name=02c88b5d-8c36-4afd-99b0-a6e59320c371.jpg"
                // url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"


            }
        },

        methods: {


            /* 提交按钮的事件 */
            async onSubmit() {
                var day = new Date();
                 // alert("当前时间为： " + day.getFullYear()+'-' + (day.getMonth() + 1)+"-"+ day.getDate())
/*

                formInline: {
                    address: '',
                        waresName: '',
                        day: '',
                        Range: ''
                }
*/

                if (!this.formInline.address) {
                    alert("该地址获取不出来，请重新输入地址");
                    return;
                };

                var _this = this;

                axios({
                    method:"get",
                    url:"https://restapi.amap.com/v3/geocode/geo?address="
                        + this.formInline.address + "&output=JSON&key=93b332a46a820fb32ad2fe70976743f5"
                }).then(function (resp) {

                    let result = JSON.stringify(resp.data);
                    let location = JSON.parse(result);

                    alert("得到的经纬度为:  " + location.geocodes[0].location);


                    if(! location.geocodes[0].location){
                        alert("该地址获取不出来，请重新输入地址");
                        return;
                    }

                    axios({method:"get",
                        url: "/user/getWares?location="
                            + location.geocodes[0].location + "&waresName="
                            + _this.formInline.waresName + "&Range="
                            + _this.formInline.Range + "&day="
                            + _this.formInline.day
                    }).then(function (resp2){

                        alert("运行了1")
                        alert(JSON.stringify(resp2))
                        alert("resp.data.code 的数据是:  " + JSON.stringify(resp2.data.code))
                        alert("运行了2")
                        if (resp2.data.code == 1){

                            _this.wares = resp2.data.data;
                            alert("查询完毕" + JSON.stringify(_this.wares) )
                        }else {

                            _this.$message({
                                showClose: true,
                                message: '查询失败,' + resp2.data.msg,
                                type: 'error'
                            });
                        }
                    });
                });

            },


            // 购买
            buyWares(row){
                // console.log(this.brand);

                alert("描述为： " + row.description)


                let _this = this;
                this.$prompt('请输入身份证号码，可以才能购买', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputPattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    inputErrorMessage: '身份证号码的格式不正确'
                }).then(({ value }) => {

                        axios({
                            method:"post",
                            url: "/user/buyWares?" +
                                "idNumber=" + value +
                                "&id=" + row.id +
                                "&day=" + _this.formInline.day
                        }).then(function (resp){


                            if (resp.data.code == 1){
                                _this.$message({
                                    type: 'success',
                                    message: '购买成功,你输入的身份证号码是: ' + value
                                });
                                _this.onSubmit();
                            } else {
                                _this.$message({
                                    showClose: true,
                                    message: '购买失败,' + resp.data.msg,
                                    type: 'error'
                                });

                            }


                        });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消购买'
                    });
                });


            },


            // 查询详情
            queryWares(row){
                // console.log(this.brand);
                alert("查询详情运行了")
                alert(row.address)
                this.$alert('<strong>这是 <i>商品民宿</i> 的详细信息</strong><br>' +
                    '<br>民宿的id:   ' +row.id+
                    '<br>民宿的名称:   ' +row.waresName+
                    '<br>民宿的价格:  ' +row.price+  '  元'+
                    '<br>民宿最多能售卖:   ' +row.number+ '   次'+
                    '<br>民宿最多能住:   ' +row.norms+ '   人'+
                    '<br>民宿的地址:   ' +row.address+
                    '<br>民宿距离你:   ' +row.addressDistance+ '  米' +
                    '<br>民宿老板的电话:   ' +row.createPhone+
                    '<br>民宿的描述:   ' +row.description+
                    '<br><a href="https://m.amap.com/navi/?dest='+row.addressX+','+row.addressY+'&destName='+ row.address +'&hideRouteIcon=1&key=93b332a46a820fb32ad2fe70976743f5" target="_blank">点击可以查看地图位置</a> ' +
                    '<br>' +
                    '', '民宿的描述', {
                    dangerouslyUseHTMLString: true
                });

            }


        },

        /* 初始化数据day， */
        created() {
            var day = new Date();
            this.formInline.day = day.getFullYear()+'-' + (day.getMonth() + 1)+"-"+ day.getDate();
            // alert("当前时间为1： " + day.getFullYear()+'--' + (day.getMonth() + 1)+"--"+ day.getDate())
            // alert("当前时间 this.formInline.day 为： " + this.formInline.day)

        },

        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        }



    })


</script>


</body>
</html>